CSS @supports'i meisterlik valdamine: funktsioonide tuvastamine kaasaegses veebidisainis

Pidevalt arenevas veebiarenduse maailmas on ülimalt oluline tagada brauseriteülene ühilduvus ja sujuvalt käsitleda toetamata funktsioone. CSS-i @supports reegel pakub võimast mehhanismi funktsioonide tuvastamiseks, võimaldades arendajatel tingimuslikult rakendada CSS-stiile vastavalt brauseri toele konkreetsetele funktsioonidele. See blogipostitus süveneb @supports reegli peensustesse, uurides selle süntaksit, võimekust ja praktilisi rakendusi robustsete ja tulevikukindlate veebidisainide loomisel.

Mis on CSS @supports?

@supports reegel, tuntud ka kui CSS-i toetuse selektor, on tingimuslik at-reegel, mis võimaldab teil kontrollida, kas brauser toetab konkreetset CSS-funktsiooni või funktsioonide kombinatsiooni. See hindab tingimust ja rakendab reegli sees määratletud stiile ainult siis, kui tingimus on tõene. See võimaldab teil oma veebisaidi välimust ja funktsionaalsust progressiivselt täiustada brauserites, mis toetavad uuemaid CSS-funktsioone, pakkudes samal ajal sujuvaid varulahendusi vanematele brauseritele.

Mõelge sellest kui "if" lausest oma CSS-i jaoks. Selle asemel, et kontrollida JavaScripti muutujaid, kontrollite otse CSS-i võimekust.

@supports'i süntaks

@supports reegli põhisüntaks on järgmine:

            @supports (tingimus) {
  /* CSS-reeglid, mida rakendada, kui tingimus on tõene */
}

            

              
                Copy
              
            
          

tingimus võib olla lihtne CSS-i omaduse-väärtuse paar või keerulisem avaldis, mis kasutab loogilisi operaatoreid.

Põhinäited: üksikute CSS-funktsioonide tuvastamine

Alustame lihtsa näitega display: grid omaduse toe tuvastamisest:

            @supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

            

              
                Copy
              
            
          

Selles näites, kui brauser toetab display: grid, rakendatakse @supports reegli sees olevad stiilid .container elemendile, luues ruudustikupaigutuse. Brauserid, mis ei toeta grid'i, lihtsalt ignoreerivad neid stiile ja sisu kuvatakse tõenäoliselt traditsioonilisemas plokk-paigutuses.

Teine näide, position: sticky toe tuvastamine, mis on kasulik kleepuvate päiste või külgribade loomiseks:

            @supports (position: sticky) {
  .sticky-element {
    position: sticky;
    top: 0;
    background-color: white; /* Parema nähtavuse tagamiseks */
    z-index: 10;
  }
}

            

              
                Copy
              
            
          

Täpsemad päringud: tingimuste kombineerimine loogiliste operaatoritega

@supports reegel muutub veelgi võimsamaks, kui kombineerite tingimusi loogiliste operaatoritega nagu and, or ja not.

"and" operaator

and operaator nõuab, et mõlemad tingimused selle kummalgi poolel oleksid tõesed, et @supports reegel rakenduks. Näiteks:

            @supports (display: flex) and (backdrop-filter: blur(10px)) {
  .element {
    display: flex;
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

See reegel rakendub ainult siis, kui brauser toetab nii display: flex kui ka backdrop-filter: blur(10px). Kui ükskõik kumb neist on toetamata, siis reegleid ei rakendata.

"or" operaator

or operaator nõuab, et vähemalt üks tingimustest selle kummalgi poolel oleks tõene, et @supports reegel rakenduks. Kaaluge erinevate tootja prefiksite kontrollimist:

            @supports ((--webkit-mask-image: url(image.png)) or (mask-image: url(image.png))) {
  .masked-element {
    -webkit-mask-image: url(image.png);
    mask-image: url(image.png);
  }
}

            

              
                Copy
              
            
          

See näide kontrollib kas -webkit-mask-image (vanemate Safari ja Chrome'i versioonide jaoks) või standardse mask-image omaduse tuge. Kui kumbki neist on toetatud, rakendatakse maskimise stiil.

"not" operaator

not operaator eitab sellele järgnevat tingimust. See hindab tõeseks ainult siis, kui tingimus on väär. See on eriti kasulik varulahenduste pakkumiseks brauseritele, mis *ei* toeta konkreetset funktsiooni.

            @supports not (display: grid) {
  .container {
    /* Varustiilid brauseritele ilma grid'i toeta */
    float: left;
    width: 33.33%; /* Näidis varupaigutus */
  }
}

            

              
                Copy
              
            
          

Sel juhul rakendatakse @supports not (display: grid) reegli sees olevad stiilid brauseritele, mis *ei toeta* display: grid'i. See tagab, et isegi vanemad brauserid saavad elementaarse paigutuse.

Praktilised näited ja kasutusjuhud

Uurime mõningaid praktilisi näiteid, kuidas kasutada @supports'i oma veebidisainide täiustamiseks.

1. CSS-muutujate (kohandatud omaduste) rakendamine varulahendustega

CSS-muutujad pakuvad võimsat viisi stiilide haldamiseks ja dünaamiliste teemade loomiseks. Vanemad brauserid neid aga ei toeta. Saame kasutada @supports'i varulahenduste pakkumiseks:

            /* Vaikestiilid (brauseritele ilma CSS-muutujateta) */
body {
  background-color: #f0f0f0;
  color: #333;
}

@supports ( --custom-property: true ) {
  body {
    background-color: var(--background-color, #f0f0f0); /* Varulahendus, kui muutujat pole määratletud */
    color: var(--text-color, #333);
  }
}

            

              
                Copy
              
            
          

Siin määratleme esmalt vaikestiilid brauseritele, mis ei toeta CSS-muutujaid. Seejärel, @supports reegli sees, kasutame var(), et rakendada CSS-muutujaid, kui neid toetatakse. Teine argument funktsioonile `var()` on varuväärtus, mida kasutatakse juhul, kui kohandatud omadust pole määratletud. See on robustne viis potentsiaalselt määratlemata CSS-muutujate käsitlemiseks toetavates brauserites.

2. Tüpograafia täiustamine Font-Display abil

Omadus font-display kontrollib, kuidas fonte kuvatakse nende laadimise ajal. Enamik kaasaegseid brausereid toetab seda, kuid vanemad brauserid ei pruugi seda ära tunda. Siin on, kuidas kasutada @supports'i tüpograafia täiustamiseks, pakkudes samal ajal varulahendust:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff2') format('woff2'),
       url('my-custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Vaikestiilid */
body {
  font-family: 'MyCustomFont', sans-serif;
}

@supports (font-display: swap) {
  @font-face {
    font-family: 'MyCustomFont';
    src: url('my-custom-font.woff2') format('woff2'),
         url('my-custom-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Kasuta 'swap' kaasaegsetes brauserites */
  }
}

            

              
                Copy
              
            
          

Selles näites määratleme fondi ja rakendame selle 'body'-le. @supports reegel kontrollib seejärel font-display: swap tuge. Kui see on toetatud, määratleb see fondi uuesti koos font-display: swap'iga, andes brauserile korralduse kuvada varuteksti, kuni kohandatud font on laaditud. Brauserid, mis ei toeta font-display'd, kasutavad lihtsalt kohandatud fonti, kui see on laaditud, ilma vahetuskäitumiseta.

3. Vormielementide stiilimine 'Appearance' abil

Omadus appearance võimaldab teil kontrollida vormielementide loomulikku välimust. Selle tugi võib aga brauseriti erineda. Saate kasutada @supports'i, et pakkuda ühtlast stiili, kasutades samal ajal ära loomulikku välimust seal, kus see on saadaval:

            /* Vaikestiilid vanematele brauseritele */
input[type="checkbox"] {
  /* Kohandatud märkeruudu stiil */
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  /* ... muud kohandatud stiilid ... */
}

@supports (appearance: none) or (-webkit-appearance: none) {
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    /* Täiustatud stiil kaasaegsetele brauseritele */
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background-color: white;
    position: relative;
    cursor: pointer;
  }

  input[type="checkbox"]:checked::before {
    content: "\2713"; /* Linnukese märk */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: green;
  }
}

            

              
                Copy
              
            
          

See näide määratleb esmalt kohandatud stiili märkeruutudele brauserites, mis ei toeta appearance omadust. Seejärel, @supports reegli sees, lähtestab see appearance omaduse väärtuseks none ja rakendab täiustatud stiili pseudoelementide abil, et luua visuaalselt meeldiv märkeruut. See tagab ühtlase välimuse erinevates brauserites, kasutades samal ajal võimaluse korral ära loomulikku välimust.

4. CSS Shapes'i kasutamine varulahendustega

CSS Shapes võimaldab teil luua mittetäisnurkseid paigutusi, määratledes kujundeid, mille ümber sisu saab voolata. Brauserite tugi pole aga universaalne. @supports laseb teil rakendada sujuvat tagasiühilduvust (graceful degradation).

            .container {
  width: 400px;
  height: 300px;
  position: relative;
}

.shaped-element {
  width: 200px;
  height: 200px;
  float: left; /* Varulahendus brauseritele ilma CSS Shapes toeta */
  margin-right: 20px;
}

@supports (shape-outside: circle(50%)) {
  .shaped-element {
    float: none; /* Eemalda float */
    shape-outside: circle(50%);
    width: 200px;
    height: 200px;
    margin-right: 20px;
  }
}

            

              
                Copy
              
            
          

Siin kasutame varulahendusena float: left. Brauserid, mis ei toeta CSS Shapes'i, lihtsalt nihutavad .shaped-element'i vasakule. Brauserites, mis *toetavad* shape-outside'i, eemaldatakse 'float' ja rakendatakse kuju, võimaldades tekstil voolata ümber ringi.

5. `object-fit`'i kasutamine piltide käsitlemiseks

Omadus object-fit on uskumatult kasulik piltide suuruse muutmise ja nende konteineritesse sobitamise kontrollimiseks. Toe puudumine nõuab aga varulahendusi.

            .image-container {
  width: 200px;
  height: 150px;
  overflow: hidden; /* Veendu, et pilt ei voolaks üle */
}

.image-container img {
  width: 100%;
  height: auto; /* Säilita kuvasuhe */
}

@supports (object-fit: cover) {
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Kärbi pilti konteineri täitmiseks */
    object-position: center; /* Keskenda kärbitud osa */
  }
}

            

              
                Copy
              
            
          

Vaikestiilid tagavad, et pilt säilitab oma kuvasuhte konteineri sees. @supports reegel rakendab seejärel object-fit: cover, et kärpida pilti nii, et see täidaks konteineri täielikult, ja object-position: center keskendab kärbitud osa, mille tulemuseks on ühtlane ja visuaalselt meeldiv pildikuva erinevates brauserites.

@supports'i kasutamise parimad praktikad

@supports reegli efektiivseks kasutamiseks kaaluge järgmisi parimaid praktikaid:

• Progressiivne täiustamine: Kasutage @supports'i kasutajakogemuse parandamiseks brauserites, mis toetavad täiustatud funktsioone, pakkudes samal ajal funktsionaalset baastaset vanematele brauseritele.
• Spetsiifilisus: Olge @supports'i kasutamisel teadlik CSS-i spetsiifilisusest. Veenduge, et @supports reegli sees olevatel stiilidel oleks sobiv spetsiifilisus vastuoluliste stiilide ülekirjutamiseks.
• Testimine: Testige oma veebisaiti põhjalikult erinevates brauserites ja seadmetes, et veenduda @supports reeglite ootuspärases toimimises. Kasutage brauseri arendaja tööriistu rakendatud stiilide kontrollimiseks ja ühilduvusprobleemide tuvastamiseks.
• Tootja prefiksid: Tootja prefiksitega omaduste kontrollimisel kasutage or operaatorit erinevate prefiksite katmiseks. Näiteks: @supports ((-webkit-transform: rotate(45deg)) or (transform: rotate(45deg))).
• Loetavus: Vormindage oma @supports reeglid loetavuse tagamiseks. Kasutage korrektset taanet ja kommentaare iga reegli eesmärgi selgitamiseks.
• Vältige liigset kasutamist: Kuigi @supports on võimas, vältige selle liigset kasutamist. @supports'i ülemäärane kasutamine võib muuta teie CSS-i keerulisemaks ja raskemini hooldatavaks. Kasutage seda strateegiliselt konkreetsete ühilduvusprobleemide lahendamiseks või teatud funktsioonide täiustamiseks.

Varulahenduste olulisus

Varulahenduste pakkumine on @supports'i kasutamise oluline aspekt. See tagab ühtlase kasutajakogemuse laias valikus brauserites, olenemata nende toest uuematele CSS-funktsioonidele. Hästi disainitud varulahendus peaks:

• Olema funktsionaalne: Varulahendus peaks pakkuma funktsiooni põhifunktsionaalsust, isegi kui see ei näe välja nii visuaalselt meeldiv kui täiustatud versioon.
• Olema ligipääsetav: Varulahendus peaks olema ligipääsetav kõigile kasutajatele, sealhulgas puuetega inimestele.
• Olema hooldatav: Varulahendust peaks olema lihtne hooldada ja uuendada.

Näiteks, kui kasutate grid-paigutust, võib varulahendus hõlmata float'ide või inline-block'ide kasutamist elementaarse paigutuse loomiseks. Kui kasutate CSS-muutujaid, saate pakkuda vaikeväärtusi värvidele ja fontidele.

Brauseri ühilduvuse kaalutlused

Kuigi @supports reegel on kaasaegsete brauserite poolt laialdaselt toetatud, on oluline olla teadlik mõningatest ühilduvuskaalutlustest:

• Vanemad brauserid: Väga vanad brauserid ei pruugi @supports reeglit üldse toetada. Sellistel juhtudel ignoreeritakse kõiki @supports reegli sees olevaid stiile. On ülioluline pakkuda nendele brauseritele piisavaid varulahendusi.
• Internet Explorer: Vanematel Internet Exploreri versioonidel on piiratud tugi CSS-funktsioonidele. Testige alati oma veebisaiti Internet Exploreris, et veenduda varulahenduste korrektses toimimises. Kaaluge tingimuslike kommentaaride kasutamist IE-spetsiifiliste paranduste jaoks, kui see on vajalik (kuigi seda üldiselt ei soovitata funktsioonide tuvastamise kasuks).
• Mobiilibrauserid: Mobiilibrauseritel on üldiselt hea @supports'i tugi. Siiski on endiselt oluline testida oma veebisaiti erinevatel mobiilseadmetel ja ekraanisuurustel, et tagada ühtlane kasutajakogemus.

Viidake ressurssidele nagu Can I use..., et kontrollida konkreetsete CSS-funktsioonide ja @supports reegli enda brauserituge.

Ligipääsetavuse kaalutlused

@supports'i kasutamisel on oluline arvestada ligipääsetavusega, et tagada teie veebisaidi kasutatavus kõigile, olenemata nende võimetest. Siin on mõned ligipääsetavuse kaalutlused:

• Semantiline HTML: Kasutage semantilisi HTML-elemente, et anda oma sisule selge struktuur ja tähendus. See aitab abistavatel tehnoloogiatel teie veebisaiti õigesti mõista ja tõlgendada.
• ARIA atribuudid: Kasutage ARIA atribuute, et pakkuda lisateavet oma elementide rollide, olekute ja omaduste kohta. See võib parandada dünaamilise sisu ja kohandatud vidinate ligipääsetavust.
• Klaviatuuriga navigeerimine: Veenduge, et kõik interaktiivsed elemendid teie veebisaidil on ligipääsetavad klaviatuuriga navigeerimise kaudu. Kasutage tabindex atribuuti fookuse järjekorra kontrollimiseks ja visuaalsete vihjete pakkumiseks, mis näitavad, milline element on hetkel fookuses.
• Värvikontrastsus: Veenduge, et teie veebisaidi teksti ja taustavärvide vahel oleks piisav värvikontrastsus. See muudab teie sisu lugemise lihtsamaks nägemispuudega kasutajatele.
• Testimine abistavate tehnoloogiatega: Testige oma veebisaiti abistavate tehnoloogiatega, näiteks ekraanilugejatega, et veenduda selle ligipääsetavuses puuetega kasutajatele.

Põhilisest funktsioonituvastusest kaugemale: konkreetsete väärtuste kontrollimine

Kuigi enamik näiteid keskendub omaduste toe kontrollimisele, saab @supports kontrollida ka *konkreetseid* väärtusi.

            @supports (transform-origin: 50% 50%) {
  .element {
    transform-origin: 50% 50%;
  }
}

            

              
                Copy
              
            
          

See võib tunduda üleliigne, kuid on kasulik keerukamate väärtuste toe kontrollimisel. Näiteks:

            @supports (display: contents) {
  .element {
    display: contents;
  }
}

            

              
                Copy
              
            
          

See näide kontrollib display omaduse väärtuse `contents` tuge. Kuigi display ise on laialdaselt toetatud, on `display: contents` uuem lisandus ja see võimaldab teil pakkuda varulahendust.

Funktsioonituvastuse tulevik

@supports reegel on kaasaegse veebiarenduse nurgakivi, mis võimaldab arendajatel omaks võtta uusi CSS-funktsioone, säilitades samal ajal ühilduvuse vanemate brauseritega. Kuna CSS areneb edasi, jääb @supports reegel oluliseks tööriistaks robustsete, tundlike ja tulevikukindlate veebidisainide ehitamisel. Koos selliste tööriistadega nagu PostCSS ja Babel aitab see ületada lõhet tipptasemel funktsioonide ja laialdase brauserite kasutuselevõtu vahel.

Kokkuvõte

CSS-i @supports reegel on hindamatu tööriist igale veebiarendajale, kes soovib luua kaasaegseid, robustseid ja brauseriteüleselt ühilduvaid veebisaite. Mõistes selle süntaksit, võimekust ja parimaid praktikaid, saate @supports'i abil oma disaine progressiivselt täiustada, pakkuda sujuvaid varulahendusi ja tagada ühtlase kasutajakogemuse laias valikus brauserites ja seadmetes. Võtke omaks funktsioonituvastuse jõud ja tõstke oma veebiarenduse oskused uuele tasemele. Ärge unustage põhjalikult testida ja pakkuda läbimõeldud varulahendusi, et rahuldada kogu maailmas kasutatavate veebibrauserite mitmekesist maastikku.